// 挂号操作
<template>
  <div>
    <!-- <TopManu @handelSave="handelSave"></TopManu> -->

    <div class="boxs">
      <div class="selects">
          <div> <el-input style="width:250px" v-model="params.keyword" placeholder="请输入内容"></el-input>   <el-button class="butB_Sel" @click="query">查询</el-button></div>
          <div>

               <!-- <div>
              <el-select v-model="params.status" placeholder="请选择挂号状态" @change="searchB">
                <el-option
                  v-for="(item,index) in $baseBai['mzsf']['gh_zt']"
                  :key="'index1'+index"
                  :label="item.label"
                  :value="item.value"

                >
                </el-option>
              </el-select>
            </div> -->
              <div>

                <el-cascader
                   placeholder="请选择科室"
                :options="subjectData"
                @change="changeSubject"
                 v-model="doctor_dept"
                :props="{ checkStrictly: true,value:'id',label:'name' }"
                clearable></el-cascader>
               

            </div>
            <div>
              <!-- <el-date-picker
                v-model="params.start_time"
                type="daterange"
                range-separator="至"
                format="yyyy 年 MM 月 dd 日"
                style="width: 100%"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                @change="riqiSel"
              >
              </el-date-picker> -->
 

                 <el-date-picker
              v-model="start_time"
              type="daterange"
              range-separator="-"
               @change="riqiSel"
                value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            </div>

          </div>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待输液" name="one">
          
         

               <tableB  :loading="loading"  :thatF="this" :tableTitle="tableTitle" :tableData="tableData" @dialogStatus="dialogStatus()"></tableB>
         
        </el-tab-pane>
        <el-tab-pane label="输液中" name="two">

           

             <tableB  :loading="loading"  :thatF="this" :tableTitle="tableTitle" :tableData="tableData" @dialogStatus="dialogStatus()"></tableB>
        </el-tab-pane>
         <el-tab-pane label="已完成" name="three">

             
             <tableB  :loading="loading"  :thatF="this" :tableTitle="tableTitle" :tableData="tableData" @dialogStatus="dialogStatus()"></tableB>
        </el-tab-pane>
      </el-tabs>
              <el-dialog title="皮试结果录入" :modal-append-to-body="false"  :visible.sync="show_skinTestSave" destroy-on-close>
                  <skinTestSave  :thatF="this"></skinTestSave>
        </el-dialog>

        <div>  <div>
           <el-pagination
           class="fenye"
            :background="true"
            :current-page="params.page"
            :page-size="params.limit"
            layout="prev, pager, next"
            @current-change="handlePagination"
            :total="pageCount">
            </el-pagination>
      </div></div>
    </div>
  </div>
</template>

<script>
let that;




import tableB from "./common/tableB"
import skinTestSave from './common/skinTestSave.vue'
// import $baseBai from "@/utils/baseBai"
export default {
  name:"InfusionRoom",
  data() {
    return {
     activeName:'one', 
     show_skinTestSave:false,
    tableTitle:this.$baseBai['InfusionRoom']['table_list_one'],
    tableData: [ ],
    loading: false,
    start_time:'',
    pageCount:0,
    params:{
      keyword:'',
      time:'',
      dept_id:'',
      status:'',
      page:1,
      limit:10,
    },
    doctor_dept:'',
subjectData:[],

      disu:[],
      pinci:[],
      geiyao:[],
      xiyaojiaozhu:[],

      skinTest_status:'',
      SkinTestHistoryData:[],
    };
  },

  mounted() {
    this.getList()
       this.getDeptIndex()



       Promise.all([
        this.getDict_dataDictIndex(47),
        this.getCommonGetPinci(),
        this.getDrug_channelGetList(),
        this.getDict_dataDictIndex(12),
        ]).then((res) => {
          console.log("reshhaa", res);
          this.disu = res[0].data[0].items;

          this.pinci = res[1].data;
          this.geiyao = res[2].data.list;
          this.xiyaojiaozhu = res[3].data[0].items;
        });
  },
  methods: {

     getDict_dataDictIndex(num) {
      let t = this;
      return new Promise((resolve, reject) => {
        t["_API"].getDict_dataDictIndex({ group_id: num }).then((res) => {
          resolve(res);
        });
      });
    },
    getCommonGetPinci() {
      let t = this;
      return new Promise((resolve, reject) => {
        t["_API"].getCommonGetPinci().then((res) => {
          resolve(res);
        });
      });
    },
    getDrug_channelGetList() {
      let t = this;
      return new Promise((resolve, reject) => {
        t["_API"].getDrug_channelGetList().then((res) => {
          resolve(res);
        });
      });
    },
     changeSubject(e){
     
           this.params.page=1;
     
         this.params.doctor_dept=e[e.length-1]
           this.getList();
      },
       getDeptIndex(){
      this['_API'].getDeptIndex().then(res=>{
            if(res.code==200){
             
              this.subjectData=res.data;
            }
      })
    },
    getList(){
          this.loading=true;
          this['_API'].getClinic_nurseInfusionIndex(this.params).then(res=>{
               this.loading=false;
                 if(res.code==200){

                    if(res.data.list.length>0){
                      this.pageCount=res.data.count;


                        this.tableData=res.data.list;
                      
                    }
                     
                      
                 }
      })
    },
     handlePagination(e){
        
         this.params.page=e;
         this.getList()
        
    },
    handleSelect(item) {
     
        console.log("item",item);
      },
    handleClick(e){
      
        let data = this.$baseBai["InfusionRoom"];

    if( this.activeName === "one"){
         this.tableTitle= data["table_list_one"];
         this.params.status=1;
      }else if( this.activeName === "two"){
         this.tableTitle= data["table_list_two"];
         this.params.status=2;
      }else if( this.activeName === "three"){
        this.params.status=3; 
         this.tableTitle= data["table_list_three"];
      }
      this.tableData=[];
      this.params.page=1;
      this.getList()
    
    },
    getClinic_nurseGetSkinTestHistory(recipe_drug_id){
         this['_API'].getClinic_nurseGetSkinTestHistory({recipe_drug_id:recipe_drug_id}).then(res=>{
             
                 if(res.code==200){
                   this.SkinTestHistoryData=res.data
                 }
          })
    },
    query(){
      this.params.page=1;
      this.getList()
    },
   searchB(){
     this.params.page=1;
       this.getList()
   },
       riqiSel(e){
        
        this.params.time=  ((this.start_time.toString()).replace(',','|')).toString()
       
       this.params.page=1;
       this.getList()
      
      },
      querySearchAsync(queryString, cb){
          //  console.log("queryString",queryString);
          //   console.log("cb",cb);
       
      },
      createStateFilter(){
           return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
      },
  },
  components: {
   skinTestSave,
  
    tableB,
   
  },
};
</script>

<style lang='scss' scoped>
@import "./InfusionRoom.scss";


    /deep/ .el-tabs__item.is-active{
      color: #02bf6b;
    }



  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #02bf6b;
  }

  .fenye{
    text-align: right;
    margin-top: 20px;
  }
  .selects{
    padding-top: 40px;
    >div{
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      >div{
        margin-right: 20px;
      }
    }
  }
    .fenye{
    text-align: right;
    margin-top: 20px;
  }


    /deep/ .el-dialog{
    width: 80%;
  }
  /deep/ .el-dialog__body{
    height: 60vh;
    overflow: scroll;
  }
</style>